<template>
  <div class="all-content">
    <BreadList :breadList="breadList"></BreadList>
    <div class="manage-content"
      v-loading="listLoading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)">
      <div class="table-content">
        <div class="list" v-show="tableData.length > 0">
          <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%;height: 100%"
            height="100%">
            <el-table-column
              label="序号"
              type="index"
              width="68">
              <template slot-scope="scope">
                <span>{{(tablePageData.currentPage - 1) * tablePageData.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="线索集名称"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.name" placement="top"> -->
                  <span class="desc-style">{{scope.row.name}}</span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="clueNum"
              label="线索数"
              width="100">
            </el-table-column>
            <el-table-column
              prop="createTime"
              :formatter="dateFormat"
              label="生成时间"
              width="320">
            </el-table-column>
            <el-table-column
              prop="exceptionNum"
              label="异常种类"
              width="110">
            </el-table-column>
            <el-table-column
              label="线索集异常种类"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.exceptionLogic" placement="top"> -->
                  <span class="desc-style">{{scope.row.exceptionLogic}}</span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="397">
              <template slot-scope="scope">
                <span class="operate-item" @click="itemLook(scope.row)"><span class="icon icon-look"></span>查看</span>
                <!-- 推送后的线索不显示删除按钮 -->
                <span v-if="scope.row.canDelete" class="operate-item delete" @click="itemDelete(scope.row)"><span class="icon icon-delete"></span>删除</span>
                <span v-if="!scope.row.evaluationResult" class="operate-item" @click="itemFeedback(scope.row)"><span class="icon icon-feedback"></span>成案反馈</span>
                <!-- 已反馈 -->
                <span v-else class="operate-item disabled"><span class="icon icon-feedback"></span>{{ feedbackFormat(scope.row.evaluationResult) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box" v-show="tableData.length > 0">
          <el-pagination
            class="table-page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="total, sizes, slot, prev, pager, next"
            :total="tablePageData.total">
            <span class="page-item first" @click="handleCurrentChange(1)">首页</span>
          </el-pagination>
          <el-pagination
            class="table-page"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="slot"
            :total="tablePageData.total">
            <span class="page-item" @click="handleCurrentChange(Math.ceil(tablePageData.total/tablePageData.pageSize))">末页</span>
            <span class="page-jumper">跳至<el-input class="page-num" v-model="tablePageData.inputNum" @input.native="tablePageData.inputNum = JSON.stringify(tablePageData.inputNum).replace(/[^0-9]/g,'')" @blur="handleCurrentChange(tablePageData.inputNum)" @keyup.enter.native="handleCurrentChange(tablePageData.inputNum)"></el-input>页</span>
          </el-pagination>
        </div>
        <Empty v-show="tableData.length === 0" imgHeight="42%" />
      </div>
      <el-dialog
        title="成案反馈"
        v-if="feedbackModelShow"
        :visible.sync="feedbackModelShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        :destroy-on-close="true"
        width="480px"
        custom-class="detail-dialog"
        >
          <Feedback ref="feedback" @feedbackDown="feedbackDown"></Feedback>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="feedbackSure">确定</el-button>
            <el-button @click="feedbackModelShow = false">取消</el-button>
          </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Empty from '../../components/empty';
  import Feedback from '../../components/feedback';
  import { formatDate } from '../../util/util';
  import { ClueResource } from '../../axios/index';
  import { mapGetters, mapActions } from 'vuex';
  import BreadList from '../../components/breadList';
  export default {
    name: 'CluesList',
    components: {
      Empty,
      Feedback,
      BreadList
    },
    data() {
      return {
        // 搜索条件
        searchParams: {
          model: 0,
          dataSet: 0,
          time: []
        },
        oldSearchParams: {
          model: 0,
          dataSet: 0,
          time: []
        },
        // 表格相关
        listLoading: false,
        tableData: [],
        tablePageData: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10, 20, 50],
          inputNum: 1
        },
        // 成案反馈
        feedbackModelShow: false,
        // 选中的线索集
        activeCollection: '',
        // 面包屑列表
        breadList: [
          {
            modelName: 'clueManagelist',
            name: '线索管理'
          },
          {
            modelName: 'ClueResultList',
            name: '线索结果列表'
          },
          {
            modelName: 'CluesList',
            name: '线索集列表'
          }
        ]
      }
    },
    mounted() {
      this.getTableList();
    },
    methods: {
      ...mapActions([
        'setActiveItem'
      ]),
      // 时间格式化
      dateFormat(row) {
        return formatDate(row.createTime, 'yyyy年mm月dd日 hh:MM');
      },
      // 成案反馈格式化
      feedbackFormat(evaluationResult) {
        switch(evaluationResult){
          case 1:
            return '成案'
          case 2:
            return '调查'
          case 3:
            return '放弃'
          default:
            return ''
        }
      },
      // 获取列表数据
      getTableList() {
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        ClueResource
        .collectionListForAdmin({
          taskId: this.activeItem.taskId,
          rybm: this.userInfo.rybm,
          pageNo: this.tablePageData.currentPage,
          pageSize: this.tablePageData.pageSize
        })
        .then(res => {
          returnTrue = true;
          this.listLoading = false;
          if(res && res.data) {
            this.tablePageData.total = parseInt(res.data.total);
            if(res.data.records) {
              this.tableData = res.data.records
            }
          }
        })
        .catch(() => {  
          returnTrue = true;
          this.listLoading = false;
        })
      },
      // 改变每页size
      handleSizeChange(val) {
        this.tablePageData.pageSize = val;
        this.tablePageData.currentPage = 1;
        this.tablePageData.inputNum = 1;
        this.getTableList()
      },
      // 切页
      handleCurrentChange(val) {
        val = parseInt(val);
        if(!val || val <= 0) {
          val = 1;
        }
        else if(val > Math.ceil(this.tablePageData.total / this.tablePageData.pageSize)) {
          val = Math.ceil(this.tablePageData.total / this.tablePageData.pageSize);
        }
        this.tablePageData.inputNum = val;
        if(val === this.tablePageData.currentPage) {
          return
        }
        this.tablePageData.currentPage = val;
        this.getTableList();
      },
      // 查看线索集详情
      itemLook(item) {
        let activeItem = this.activeItem;
        activeItem.collectionId = item.id;
        activeItem.collectionName = item.name;
        this.setActiveItem(activeItem)
        this.$router.push({path:'/CluesDetails'})
      },
      // 删除线索集
      itemDelete(item) {
        this.$confirm('将删除线索集，是否确认', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          closeOnPressEscape: false,
          customClass: 'small-tip'
        })
        .then(() => {
          this.listLoading = true;
          ClueResource
          .collectionDelete({
            collectionId: item.id
          })
          .then(res => {
            this.$message.success('删除成功');
            this.tablePageData.inputNum = 1;
            this.tablePageData.currentPage = 1;
            this.getTableList();
          })
          .catch(() => {
            this.listLoading = false;
          })
        })
        .catch(() => {

        })
      },
      // 成案反馈
      itemFeedback(item) {
        if (item.clueNum > 0) {
          this.activeCollection = item.id
          this.feedbackModelShow = true;
        } else {
          this.$message.warning('当前线索集线索数为0，不能进行成案反馈！')
        }
      },
      feedbackDown(data) {
        let params = ''
        if (data.evaluationResult === 1) {
          params = {
            id: this.activeCollection,
            evaluationResult: data.evaluationResult,
            ajmc: data.ajmc,
            bmsah: data.bmsah,
            rybm: this.userInfo.rybm
          }
        } else if (data.evaluationResult === 2) {
          params = {
            id: this.activeCollection,
            evaluationResult: data.evaluationResult,
            rybm: this.userInfo.rybm
          }
        } else if (data.evaluationResult === 3) {
          params = {
            id: this.activeCollection,
            evaluationResult: data.evaluationResult,
            info: data.info,
            rybm: this.userInfo.rybm
          }
        }
        ClueResource
        .feedBackForCollection(params)
        .then(res => {
          this.$message.success('成案反馈成功')
          this.getTableList();
          this.feedbackModelShow = false;
        })
      },
      feedbackSure() {
        this.$refs.feedback.feedbackDown();
      }
    },
    computed: {
      ...mapGetters({
        activeItem: "getActiveItem",
        userInfo: "getUserInfo"
      })
    }
  }
</script>

<style scoped lang="scss">
  .all-content {
    width: 100%;
    height: 100%;
  }
  .manage-content {
    width: 100%;
    height: calc(100% - 32px);
    padding: 0 24px;
    background-color: #fff;
    .table-content {
      height: 100%;
      padding-top: 24px;
    }
  }
</style>
